<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <#include "/common/base.html" >
    <script>

    </script>
</head>
<body class="easyui-layout">
    <div data-options="region:'west', width: '200px', height:'200px'">
        <ul id="menu-tree">
        </ul>
    </div>
    <div data-options="region:'center',width: .7, border: false">
        <div id="menu-manage">
            <div style="background:#fafafa;border:1px solid #ccc">
                <a href="#" id="modify-btn" class="easyui-linkbutton" plain="true" iconCls="icon-save" onclick="modifyMenu()">修改菜单</a>
                <a href="#" id="add-btn" class="easyui-linkbutton" plain="true" iconCls="icon-edit" onclick="addMenu()">添加子菜单</a>
                <a href="#" id="delete-btn" class="easyui-linkbutton" plain="true" iconCls="icon-remove" onclick="deleteMenu()">删除当前菜单</a>
            </div>
            <form id="updateForm">
            <table>
                <tr>
                    <td>菜单名称：</td><td><input type="text" id="name" name="name"></td>
                </tr>
                <tr>
                    <td>菜单链接：</td><td><input type="text" id="url" name="url"></td>
                </tr>
                <tr>
                    <td>菜单描述：</td><td><input type="text" id="description" name="description"></td>
                </tr>
                <tr>
                    <td>菜单代码：</td><td><input type="text" id="code" name="code"></td>
                </tr>
            </table>
                <input type="hidden" id="id" name="id">
            </form>
        </div>
    </div>
</body>
<script type="text/javascript" src="/js/jquery.form.js"></script>
<script>
    var $MENU_TREE = null;
    var $MENU_MANAGE = null;
    $(function () {
        $MENU_TREE = $('#menu-tree');
        $MENU_MANAGE = $('#menu-manage');
        initMenuTree();
        initMenuManage();
        initForm();
    })
    function initMenuTree(){
        $MENU_TREE.tree({
            url: 'queryMenu',
            // checkbox: true,
            onClick: function(node){
                var id = node.id;
                var name = node.text;
                var url = node.url;
                var desc = node.attributes['description'];
                var code = node.attributes['code'];
                $('#id').val(id);$('#name').val(name);$('#url').val(url);
                $('#description').val(desc);$('#code').val(code);
            }

        })
    }
    function initMenuManage(){
        $MENU_MANAGE.panel({
            fit: true,
            title: '菜单管理'
        })
    }
    function initForm(){
        var options = {
            url: 'modify',
            type: 'POST',
            beforeSubmit: function(){
                $('#modify-btn').linkbutton('disable');
            },
            success: function(rsp,status){
                $('#modify-btn').linkbutton('enable');
                if(rsp['success']){
                    msg('修改成功',true);
                    dataReload();
                    $('#name,#url,#description,#id').val('');
                }else {
                    msg(rsp['info'], true);
                }
            },
            fail: function(){
                $('#modify-btn').linkbutton('enable');
            }
        };
        $("#updateForm").ajaxForm(options);
    }
    function modifyMenu(){
        //1、检查内容
        var name=$('#name').val();
        var url=$('#url').val();
        if(name == ''){
            msg('请填写菜单名称');return;
        }
        if(url == ''){
            msg('请填写菜单链接');return;
        }
        //2、提交表单
        $("#updateForm").submit();
    }
    function dataReload(){
        $MENU_TREE.tree('reload');
    }
    function addMenu(){
        var node = $MENU_TREE.tree('getSelected');
        if(node == null){
            msg('只能选择1个菜单');return;
        }
        openWindow('添加子菜单', '/menu/add_index?id='+node['id']);
    }
    function deleteMenu(){
        var node = $MENU_TREE.tree('getSelected');
        if(node == null){
            msg('只能选择1个菜单');return;
        }
        var child = $MENU_TREE.tree('getChildren', node.target);
        if(child.length > 0){
            msg('有子菜单，不允许删除');return;
        }
        var ids = [node.id];
        confirmDelete(ids);
    }
    function confirmDelete(ids){
        art.dialog({
            content: '确定要删除吗？',
            ok: function () {
                $.ajax({
                    url: 'delete',
                    type: 'post',
                    data: {idStr: ids.join(',')},
                    success: function(rsp){
                        if(rsp['success']){
                            msg('删除成功', true);
                            closeReload();
                        }else {
                            msg(rsp['info'],true);
                        }
                    },
                    error: function(){msg('删除出错',true);}
                });
            },
            cancelVal: '关闭',
            cancel: true //为true等价于function(){}
        });
    }
</script>
</html>